<template>
    <div class="vv">
        <div class="podc">
            <div class="hoved">
                <span class="iconfont icon-zuoyou1" @click="$router.push('/recommend')"></span>
                <div class="hto">
                   <input type="text" @click="$router.push('/Search')">
                </div>
                <span class="iconfont icon-24gl-plusCircle"></span>
            </div>
            <div class="podchead">
                  <!-- Swiper -->
                  <div class="podleft">
                     <div class="swiper-container itemcon">
                            <div class="swiper-wrapper itemcon01" >
                                <div class="swiper-slide" v-for="(item,index) in tuiplays" :key="item.id"  v-show="index<10">
                                    <span :class="{'cont':ite==index}" @click="gain(item.id,index)">{{item.name}}</span>
                                </div>
                            </div>
                      </div>
                  </div>
                  <div class="podright">
                      <span class="iconfont icon-041siyecao"></span>
                  </div>
            </div>
            <div class="podlist" v-show="thisdt==false">
                <!-- // -->
                <ol>
                    <li v-for="(item) in correlations" :key="item.id" @click="getadd(item.id)" >
                        <div class="podlistleft">
                            <van-image
                             lazy-load
                             :src="item.coverImgUrl"
                             />
                            <!-- <img :src="item.coverImgUrl" alt=""> -->
                        </div>
                        <div class="podlistright">
                            <h3>{{item.creator.nickname}}</h3>
                            <p class="te">{{item.name}}</p>
                            <p><i class="iconfont icon-icon_zuoyoujiantou"></i><span>544</span>&nbsp;<i class="iconfont icon-24gf-play"></i><span>544万</span></p>
                        </div>
                    </li>
               
                </ol>
               
            </div>
            <div class="songsto" v-show="thisdt==true">
                <!--  -->
                 <ul >
                    <li v-for="(item,index) in hotlsit" :key="item.id" v-show="index<15" @click="getsongid(item.id)">
                        <div class="podlistleft" >
                            <!-- v-for="(lel) in item.al" :key="lel.id" -->
                            <img :src="item.al.picUrl" alt="">
                        </div>
                        <div class="podlistright">
                            <h3>{{item.name}}</h3>
                            <p v-for="(le,i) in item.ar" :key="i" v-show="i<1">{{le.name}}</p>
                            <!-- <p><i class="iconfont icon-icon_zuoyoujiantou"></i><span></span>&nbsp;<i class="iconfont icon-24gf-play"></i><span>544万</span></p> -->
                        </div>
                    </li>
                </ul>
            </div>
             <!-- 底部导航 -->
            <!-- <foot-nav></foot-nav> -->

        </div>
    </div>
</template>

<script>
//引入底部导航
// import footNav from "../components/base/footNav.vue"

import Swiper from'swiper';

import {getbroadcasting,getperson,getplaydetail,getreques,getsongs} from "../api/podcast"
export default {
    data(){
        return{
            broadlist:null,
            tuiplays:null,//热门歌单
            correlations:null,//歌单相关推荐
            hotlsit:null ,//歌单详情
            Indexdflist:null,//歌单详情ID
            inidlist:5001,//歌单相关推荐ID
            thisdt:false,
            songid:null,//歌曲id
            ite:0
        }
    },
     methods:{

        
        //电台
         getbroad(){
             getbroadcasting().then(data=>{
                //  console.log("电台",data)
                this.broadlist=data;
             })   
         },
    
         //热门歌单
         getpers(){
             getperson({limit:10}).then(data=>{
                //  console.log("热门歌单",data)
                 this.tuiplays=data.tags
                //  console.log(this.inidlist)
             });
            this.getreque()//歌单相关推荐
         },
         //歌单相关推荐
         getreque(){
              //歌单相关推荐
             getreques({id:this.inidlist}).then(data=>{
                //  console.log("歌单相关推荐",data)
                 this.correlations=data.playlists
             })
         },
         //获取歌单详情
         getpllis(){
               getplaydetail({id:this.Indexdflist,limit:10}).then(data=>{
                //  console.log("歌单详情",data)
                 this.hotlsit=data.playlist.tracks;
                //  console.log( this.hotlsit)
             })
         },
         //获取歌曲url
          getsongtmics(){
               getsongs({id: this.songid}).then(data=>{
                 console.log("歌曲",data)
                //  this.hotlsit=data.playlist.tracks;
                //  console.log( this.hotlsit)
             })
         },
        //点击换歌单
         gain(id,index){
            // console.log(id)
            this.inidlist=id;
            this.ite=index;
             this.getreque()
             this.thisdt=false
            // this.getpllis()
         },
         //点击获取歌单详情
         getadd(id){
            // console.log(id)
            this.Indexdflist=id
            this.getpllis()
            this.thisdt=true
         },
         //点击获取歌曲urlid
         getsongid(id){
            this.songid=id
            this. getsongtmics();
            this.$emit("get-player-id",id)
            this.$emit("get-play-all-id",this.$route.query.id);//传递di
         }

         
     },
     created(){
        //  this.getbroad()  ////电台
        // this.getTopplays();// //歌单分类
        this.getpers();////热门歌单
     },
     mounted(){
            new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                // slidesPerView: 'auto',
                // centeredSlides: true,
                slidesPerView: 4,
                scrollbarDraggable:true,
                height: 30,
                observer:true,
                observeParkents:true,
                // window:80,
                paginationClickable:true,
                spaceBetween: 30
            });
     },
    components:{
        // footNav
    },
}
</script>

<style lang="less">
.vv{
    width: 100%;
    height: 100%;
    position:fixed;
     
    background-color: #f5f5f5;
}
  .podc{
      width: 100%;
      height: 100%;
    //   position: absolute;
      padding: 10px;
      overflow-y: scroll;
     
      box-sizing: border-box;
      .hoved{
          width: 100%;
          height: 30px;
          
          font-size: 14px;
        // background-color: red;
          display: flex;
          margin-bottom: 10px;
          line-height: 30px;
          span{
              width:10%;
              color: rgb(49, 49, 49);
              height: 100%;
              text-align: center;
              line-height: 30px;
          }
          .hto{
             width: 85%;
             height: 100%;
             display: flex;
             font-size: 18px;
             color: black;
             justify-content: space-evenly;
             input{
                  margin-top: 2px;
                  width: 100%;
                  height: 96%;
                  outline:none;
                  color: #f2f3f4;
                  // border:0px;
                  border:0;
                  border-bottom:1px solid #f9eeee;
             }
             &.cond{
                 border-bottom: 2px solid red;
             }
            //  justify-content: space-between;
           }
      }
      .podchead{
          width: 100%;
          height: 30px;
          display: flex;
          box-sizing: border-box;
          .podleft{
              width: 89%;
              height: 100%;
               .itemcon{
                    .itemcon01{
                        width: 70px;
                        span{
                            display: block;
                            width: 65px;
                            text-align: center;
                            line-height: 20px;
                            // height: 30px;
                            font-size: 14px;
                            height: 100%;
                            border-radius: 20px;
                            padding: 3px;
                            &.cont{
                                background-color: #fc5e5d;
                            }
                        }
                    }
               }
               
          }
          .podright{
              width: 10%;
              height: 100%;
              span{
                  text-align: center;
                  line-height: 30px;
                  display:block;
                  color:#6b6b6b;
              }
          }
      }
      .podlist{
          width: 100%;
          height: 100%;
          ol{
              width: 100%;
               margin-top: 20px;
              li{
                    width: 100%;
                    height: 70px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    display: flex;
                    box-sizing: border-box;
                   .podlistleft{
                        width: 70px;
                        height: 70px;
                        border-radius: 10px;
                        img{
                            width: 100%;
                            border-radius: 10px;
                        }
                   }
                   .podlistright{
                       width: 80%;
                      height: 100%;
                      padding: 10px;
                      box-sizing:border-box;
                      h3{
                          font-size: 18px;
                          height: 25px;
                          font-weight: 400;
                          overflow: hidden;
                      }
                      p{
                          color: #dedede;
                          font-size: 10px;
                          &.te{
                              color: #a3a2a2;
                            font-size: 12px;
                             overflow: hidden;
                            height: 20px;
                          }
                      }
                   }
              }
          }
        
      }
      .songsto{
             width: 100%;
             height: 100%;
             ul{
              width: 100%;
               margin-top: 20px;
              li{
                    width: 100%;
                    height: 70px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    display: flex;
                    box-sizing: border-box;
                   .podlistleft{
                        width: 70px;
                        height: 70px;
                        border-radius: 10px;
                        img{
                            width: 100%;
                            border-radius: 10px;
                        }
                   }
                   .podlistright{
                       width: 80%;
                      height: 100%;
                      padding: 10px;
                      box-sizing:border-box;
                      h3{
                          font-size: 18px;
                          height: 25px;
                          font-weight: 400;
                          overflow: hidden;
                       }
                      p{
                          color: #9d9d9d;
                          font-size: 14px;
                          &.te{
                            color: #a3a2a2;
                            font-size: 16px;
                            overflow: hidden;
                            height: 20px;
                          }
                      }
                   }
              }
          }
      }
  }
</style>